<template>
	<!-- <view class="container"> -->
	<view class="richtext" v-if="login">
		<view>
			<piaoyiEditor :values="article.content" :maxlength="3000" @changes="saveContens" 
		:readOnly="readOnly" :photoUrl="photoUrl"  :api="api" :name="name"></piaoyiEditor>
		</view>
	    <view>
			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
				:maxCount="10"></u-upload>		
		</view>
		<view>
			<u--input placeholder="标题" border="surround" v-model="article.title" ></u--input>
		</view>	
		<view class="bv">
			<button class="but" @click="saveFB" type="primary"> 发布</button>
			<!-- <button class="but" @click="saveCG" type="primary"> 保存</button> -->
		</view>
	</view>
	<view v-else>
		请登入
	</view>

</template>

<script>
	import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
import { consumers } from 'combined-stream';
	export default {
		data() {
			return {
				fileList1: [],
				fileName: [],
				userInfo:"",
				login:false,
				readOnly: false, //是否只读
				photoUrl: 'http://localhost:8080', //服务器图片域名或者ip
				api: '/file/upload', //上传图片接口地址
				name: 'image',
				article:{
					title:"",
					author_id:"",
					pictures:"",
					content:"",	
					release_time:""
				}
			};
		},
		components: {
			piaoyiEditor
		},
		onShow: function() {
			let userInfo = uni.getStorageSync("userInfo");
			if (userInfo != null && userInfo != "") {
				this.userInfo = userInfo;
				this.login=true;
			} else {
				this.login=false;
			}
		},
		methods: {
			//提交
			saveFB(){
				let that =this;
				let pictures=""
				for (let item of this.fileName) {
					pictures+=item+">>>"
				}
				let data={
					author_id:that.userInfo.id,
					title:this.article.title,
					pictures:pictures,
					content:this.article.content,
				}
				uni.request({
					url:"http://localhost:8090/article/add",
					method:"POST",
					data:data,
					success(res) {
						console.log(res)
						that.article.title="";
						that.article.content="";
						that.fileList1=[]
					}
				})
				
			},
			//保存草稿
			saveCG(){

				let pictures=""
				for (let item of this.fileName) {
					pictures+=item+">>>"
				}
				let data={
					author_id:"1001",
					title:this.article.title,
					pictures:pictures,
					content:this.article.content,
				}
				uni.request({
					url:"http://localhost:8090/article/saveArticle",
					method:"POST",
					data:data,
					success(res) {
						
					}
				})
			},
			saveContens(e) {
				this.article.content = e.html
			},
			// 删除图片
			deletePic(event) {
				
				const fileName = this.fileName[event.index]
				uni.request({
					url: 'http://localhost:8090/file/delFile',
					method: "POST",
					data: {
						fileName: fileName,
					},

					success: (res) => {
						console.log(res)
						this[`fileList${event.name}`].splice(event.index, 1)
						this.fileName.splice(event.index, 1)
					}
				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://localhost:8090/file/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'image',
						formData: {
							user: 'test'
						},
						success: (res) => {
							const data = res.data
							let json = JSON.parse(data)
							this.fileName.push(json.data)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '多功能富文本编辑器！',
				path: '/pages/editor/editor'
			}
		},
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '多功能富文本编辑器！'
			}
		}
	}
</script>
<style lang="scss">
	.container {
		margin: 10px;
	}

	.but {
		width: 100px;
	}

	.bv {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		height: 10rem;
	}
</style>